<template>
	<view class="container">
		<view class="card">
			<view class="title">{{ title }}</view> <!-- 显示课程标题 -->
			<view class="date">发布时间：{{ formatDate(createTime) }}</view> <!-- 显示格式化后的发布时间 -->
			<view class="teacher">老师：{{ teacherName }}</view> <!-- 显示老师姓名 -->
			<view class="content">{{ content }}</view> <!-- 显示课程内容 -->
			<button @click="goToPublishPage()" v-if="isButtonDisabled==false">查看1</button> <!-- 查看按钮，点击后调用 viewDetails 方法 -->
			<text class="countdown">{{ countdown }}</text> <!-- 显示倒计时 -->
			<button @click="goToBannerPage">轮播图</button> <!-- 查看按钮，点击后调用 viewDetails 方法 -->
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "课程标题", // 课程标题
				createTime: "2023-10-01T12:00:00Z", // 发布时间（ISO 8601 格式）
				teacherName: "张老师", // 老师姓名
				content: "这是课程内容的简要介绍。", // 课程内容
				countdown: "", // 倒计时文本
				countdownTime: 10, // 倒计时的初始时间（秒）
				isButtonDisabled: false, // 按钮禁用状态，初始为 false（可用）
			};
		},
		onLoad(){
			
			console.log('===========');
		},
		methods: {
			// 格式化日期的方法
			formatDate(dateString) {
				const date = new Date(dateString); // 将字符串转换为日期对象
				return date.toLocaleString(); // 返回本地化的日期字符串
			},
			viewDetails() {
				// 点击查看按钮时的逻辑
				uni.showToast({
					title: '查看详情',
					icon: 'none'
				});
			},
			goToPublishPage() {
				// 跳转到发布页面
				uni.navigateTo({
					url: '/pages/publish/publish' // 根据实际路径调整
				});
			},
			goToBannerPage() {
				// 跳转到发布页面
				uni.navigateTo({
					url: '/pages/test/test' // 根据实际路径调整
				});
			},
			startCountdown() {
				let time = this.countdownTime; // 初始化倒计时
				this.countdown = `倒计时：${time}秒`; // 更新倒计时文本
				this.isButtonDisabled = true; // 开始倒计时时禁用按钮
				const interval = setInterval(() => {
					time--; // 每秒减少倒计时
					this.countdown = `倒计时：${time}秒`; // 更新倒计时文本
					if (time <= 0) {
						clearInterval(interval); // 倒计时结束，清除定时器
						this.countdown = "倒计时结束"; // 更新倒计时文本
						this.isButtonDisabled = false; // 倒计时结束后启用按钮
					}
				}, 1000); // 每1000毫秒（1秒）执行一次
			}
		},
		mounted() {
			this.startCountdown(); // 组件挂载时开始倒计时
		}
	};
</script>

<style>
	.container {
		padding: 20px;
		/* 容器内边距 */
	}

	.card {
		border: 1px solid #ccc;
		/* 卡片边框 */
		padding: 15px;
		/* 卡片内边距 */
		border-radius: 5px;
		/* 卡片圆角 */
	}

	.title {
		font-size: 20px;
		/* 标题字体大小 */
		font-weight: bold;
		/* 标题加粗 */
	}

	.date,
	.teacher,
	.content {
		margin-top: 10px;
		/* 上边距 */
	}

	button {
		margin-top: 10px;
		/* 上边距 */
		background-color: #007AFF;
		/* 按钮背景颜色 */
		color: white;
		/* 按钮文字颜色 */
		padding: 10px;
		/* 按钮内边距 */
		border: none;
		/* 去掉边框 */
		border-radius: 5px;
		/* 按钮圆角 */
	}

	.countdown {
		margin-top: 10px;
		/* 上边距 */
		color: red;
		/* 倒计时文本颜色 */
	}
</style>